<script lang="ts" setup>
import {ref} from "vue"
import {deleteByIdListUser, getUserInfo, putByIdUpuUserStatus} from "../serve"
import pagination from './base/pagination.vue'
import store from '../pina'
import {ElMessage, ElMessageBox} from "element-plus"

const
    pina = store(),
    itemData: any = ref({list: []}),
    fromData = ref({
      page: 1,
      size: 5,
      nickname: '',
      phone: ''
    }),
    listLoading = ref(false),
    selectable = (row: any) => ![1, 2].includes(row.id),
    deleteList = ref([])
;

function sizeChange(size: number) {
  fromData.value.size = size
  get()
}

function currentChange(currPage: number) {
  fromData.value.page = currPage
  get()
}

function get() {
  listLoading.value = true
  getUserInfo({...fromData.value}).then((r: any) => {
    itemData.value = r
    // itemData.value['list'].forEach((e: any) => {
    // e['imageInput'] = JSON.parse(e['imageInput'])
    // })
  }).finally(() => listLoading.value = false)
}

get()

function updateShowChange(id: string) {
  putByIdUpuUserStatus(id).then(() => {
    ElMessage({
      message: '状态修改成功',
      type: 'success',
      duration: 3000
    })
    get()
  }).catch(() => {
    ElMessage({
      message: '状态修改失败',
      type: 'error',
      duration: 3000
    })
  })
}

function handleSelectionChange(e: any) {
  deleteList.value = []
  e.forEach((i: any) => deleteList.value.push(i['id']))
}

function deleteChange(id: string) {
  ElMessageBox.confirm('此操作将不可恢复, 是否继续?', '提示', {type: 'info'}).then(() => {
    listLoading.value = true
    deleteByIdListUser([id]).then(() => {
      ElMessage({
        message: '删除成功！',
        type: 'success',
        duration: 3000
      })
      get()
    }).catch(() => {
      listLoading.value = false
      ElMessage({
        message: '删除失败！',
        type: 'error',
        duration: 3000
      })
    })
  }).catch(() => true)
}

function deleteListChange() {
  listLoading.value = true
  ElMessageBox.confirm('此操作将不可恢复, 是否继续?', '提示', {type: 'info'}).then(() => {
    if (deleteList.value.length == 0) {
      ElMessage({type: 'error', message: '请选择要批量删除的信息'})
      listLoading.value = false
      return
    }
    deleteByIdListUser(deleteList.value).then(() => {
      ElMessage({
        message: '删除成功！',
        type: 'success',
        duration: 3000
      })
      get()
    }).catch(() => {
      listLoading.value = false
      ElMessage({
        message: '删除失败！',
        type: 'error',
        duration: 3000
      })
    })
  }).catch(() => listLoading.value = false)
}
</script>
<template>
  <el-scrollbar>
    <el-card>
      <div slot="header">
        <el-button icon="RemoveFilled" size="default" type="danger" @click="deleteListChange">批量删除</el-button>
        <el-input v-model="fromData['nickname']" placeholder="请输入姓名搜索" style="width: 200px;margin-left: 10px;">
          <template #append>
            <el-button icon="Search" @click="get"/>
          </template>
        </el-input>
        <el-input v-model="fromData['phone']" placeholder="请输入手机号搜索" style="width: 200px;margin-left: 10px;">
          <template #append>
            <el-button icon="Search" @click="get"/>
          </template>
        </el-input>
      </div>
    </el-card>
    <el-card>
      <el-table v-loading="listLoading" :data="itemData['list']"
                :header-cell-style="{ fontWeight: 'bold' }"
                :highlight-current-row="true" element-loading-text="加载中..." size="small"
                @selection-change="handleSelectionChange">
        <el-table-column :selectable="selectable" type="selection" width="30"/>
        <el-table-column align="center" label="用户id" min-width="100" prop="id"/>
        <el-table-column align="center" label="姓名" min-width="80" prop="nickname"/>
        <el-table-column align="center" label="用户账号" min-width="80" prop="username"/>
        <el-table-column align="center" label="用户密码" prop="password" width="100"/>
        <el-table-column align="center" label="手机号" min-width="80" prop="phone"/>
        <el-table-column align="center" label="头像" min-width="80">
          <template #default="scope">
            <el-image v-show="!!scope.row.avatar" :hide-on-click-modal="true"
                      :preview-src-list="[scope.row?.avatar]" :src="scope.row.avatar" fit="cover"
                      preview-teleported
                      style="width: 60px; height: 60px;border-radius: 5px;"/>
            <el-image v-show="!scope.row?.avatar" fit="cover"
                      src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                      style="width: 60px; height: 60px;border-radius: 5px;"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户地址" prop="address" width="120"/>
        <el-table-column align="center" label="用户年龄" min-width="60" prop="age"/>
        <el-table-column align="center" label="用户性别" min-width="60" prop="gender">
          <template #default="scope">
            {{ scope['row']['gender'] == 1 ? '男' : (scope['row']['gender'] == 2 ? '女' : '不详') }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="注册时间" min-width="120" prop="createTime"/>
        <el-table-column align="center" label="角色" min-width="60" prop="role">
          <template #default="scope">
            {{ scope['row']['role'] == 'ADMIN' || scope['row']['role'] == 'admin' ? '管理员' : '用户' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" width="50">
          <template #default="scope">
            <el-switch :model-value="scope['row']['status']"
                       class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #999999"
                       @change="updateShowChange(scope['row']['id'])"/>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="80">
          <template #default="s">
            <el-button circle icon="Delete" type="danger" @click="deleteChange(s['row']['id'])"/>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <pagination :pageCurrent="itemData?.current" :pageSize="itemData?.size"
                    :small="pina.app.browser.isMini" :total="itemData?.total"
                    class="page" @size-change="sizeChange" @current-change="currentChange"/>
      </div>
    </el-card>

  </el-scrollbar>
</template>

<style lang="scss" scoped>
.page {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>